<template>
  <!--登录-->
  <div class="login_container">
    <el-dialog
      v-model="userStore.dialogFormVisible"
      title="用户登录"
      @close="close"
    >
      <el-row class="content">
        <!--  表单登录      -->
        <el-col :span="12">
          <div class="login">
            <div v-show="isForm">
              <el-form ref="from" :model="loginParams" :rules="rules">
                <el-form-item prop="phone">
                  <el-input
                    v-model="loginParams.phone"
                    :prefix-icon="User"
                    placeholder="请输入手机号码"
                  ></el-input>
                  <!--                  <span
                    v-show="!canGetCode && loginParams.phone.length > 0"
                    style="color: red"
                    >请输入正确的手机号码</span
                  >-->
                </el-form-item>
                <el-form-item prop="code">
                  <el-input
                    v-model="loginParams.code"
                    :prefix-icon="Lock"
                    placeholder="请输入验证码"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button :disabled="!canGetCode" @click="getMsgCode"
                    >获取验证码
                  </el-button>
                </el-form-item>
                <div class="bottom">
                  <el-button
                    :disabled="
                      loginParams.code.length != 6 ||
                      loginParams.phone.length != 11
                    "
                    style="width: 90%"
                    type="primary"
                    @click="login"
                    >用户登录
                  </el-button>
                  <span @click="isForm = !isForm">微信登录</span>
                  <svg
                    class="icon"
                    height="32"
                    p-id="4306"
                    t="1718808136316"
                    version="1.1"
                    viewBox="0 0 1024 1024"
                    width="32"
                    xmlns="http://www.w3.org/2000/svg"
                    @click="isForm = !isForm"
                  >
                    <path
                      d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z"
                      fill="#28C445"
                      p-id="4307"
                    ></path>
                    <path
                      d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z"
                      fill="#28C445"
                      p-id="4308"
                    ></path>
                  </svg>
                </div>
              </el-form>
            </div>
            <div v-show="!isForm" class="webchat">微信扫码登录</div>
          </div>
        </el-col>
        <!--  二维码登录      -->
        <el-col :span="12">
          <div class="rightContent">
            <div class="top">
              <div class="item">
                <img alt="" src="../../assets/images/code_app.png" />
                <svg
                  class="icon"
                  height="16"
                  p-id="4306"
                  t="1718808136316"
                  version="1.1"
                  viewBox="0 0 1024 1024"
                  width="16"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z"
                    fill="#bfbfbf"
                    p-id="4307"
                  ></path>
                  <path
                    d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z"
                    fill="#bfbfbf"
                    p-id="4308"
                  ></path>
                </svg>
                <span>微信扫一扫关注</span>
                <span>"快速预约挂号"</span>
              </div>
              <div class="item">
                <img alt="" src="../../assets/images/code_app.png" />
                <svg
                  class="icon"
                  height="16"
                  p-id="5602"
                  t="1718808672228"
                  version="1.1"
                  viewBox="0 0 1024 1024"
                  width="16"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M820.409449 797.228346q0 25.19685-10.07874 46.866142t-27.716535 38.299213-41.322835 26.204724-50.897638 9.574803l-357.795276 0q-27.212598 0-50.897638-9.574803t-41.322835-26.204724-27.716535-38.299213-10.07874-46.866142l0-675.275591q0-25.19685 10.07874-47.370079t27.716535-38.80315 41.322835-26.204724 50.897638-9.574803l357.795276 0q27.212598 0 50.897638 9.574803t41.322835 26.204724 27.716535 38.80315 10.07874 47.370079l0 675.275591zM738.771654 170.330709l-455.559055 0 0 577.511811 455.559055 0 0-577.511811zM510.992126 776.062992q-21.165354 0-36.787402 15.11811t-15.622047 37.291339q0 21.165354 15.622047 36.787402t36.787402 15.622047q22.173228 0 37.291339-15.622047t15.11811-36.787402q0-22.173228-15.11811-37.291339t-37.291339-15.11811zM591.622047 84.661417q0-8.062992-5.03937-12.598425t-11.086614-4.535433l-128 0q-5.03937 0-10.582677 4.535433t-5.543307 12.598425 5.03937 12.598425 11.086614 4.535433l128 0q6.047244 0 11.086614-4.535433t5.03937-12.598425z"
                    p-id="5603"
                  ></path>
                </svg>
                <span>扫一扫下载</span>
                <span>"预约挂号"APP</span>
              </div>
            </div>
            <span class="tip">尚医通官方指定平台</span>
            <span class="tip">快速挂号,安全放心</span>
          </div>
        </el-col>
      </el-row>
      <template #footer>
        <el-button type="primary" @click="close">关闭窗口</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" name="Login" setup>
import useUserStore from "@/store/modules/user.ts";
import { Lock, User } from "@element-plus/icons-vue";
import { computed, reactive, ref } from "vue";
import { doSendCode } from "@/api/hosiptal";
import { ElMessage } from "element-plus";
import router from "@/router";
import { useRoute } from "vue-router";
let route = useRoute();
let from = ref<any>();
let userStore = useUserStore();
let isForm = ref(true);
// 可以获取验证码
let canGetCode = computed(() => {
  let reg =
    /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/;
  return reg.test(loginParams.phone);
});
let loginParams = reactive({
  phone: "",
  code: "",
});

async function getMsgCode() {
  let result = await doSendCode(loginParams.phone);
  if (result.code === 200) {
    loginParams.code = result.data;
  }
}

const login = async () => {
  // 先全面校验表单
  await from.value.validate();
  try {
    await userStore.login(loginParams);
    userStore.dialogFormVisible = false;
    let redirect = route.query.redirect;
    if (redirect) {
      router.push(redirect as string);
    } else {
      router.push({
        path: "/home",
      });
    }
    // 关闭对话框
  } catch (e) {
    ElMessage({
      type: "error",
      message: (e as Error).message,
    });
  }
};
// 自定义表单校验
const valiPhone = (rule: any, value: string, callback: any) => {
  let reg =
    /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/;
  if (reg.test(loginParams.phone)) {
    console.log("手机号正确");
    callback();
  } else {
    callback(new Error("手机号格式不正确"));
  }
};

// 表单校验
const rules = {
  phone: [{ trigger: "change", validator: valiPhone }],
  code: [
    {
      required: true,
      message: "验证码不可以为空",
      trigger: "blur",
    },
    { min: 6, max: 6, message: "验证码为6位", trigger: "blur" },
  ],
};
// 关闭对话框
const close = () => {
  // 清空表单数据
  Object.assign(loginParams, { phone: "", code: "" });
  // 清空表单校验
  from.value.resetFields();
};
</script>

<style lang="scss" scoped>
.login_container {
  // 深度选择器
  ::v-deep(.el-dialog__body) {
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
  }

  .content {
    margin: 40px 0;

    .login {
      padding: 10px;
      border: 1px solid #ccc;
      // 微信扫码登录
      .webchat {
      }

      .bottom {
        display: flex;
        flex-direction: column;
        align-items: center;

        span {
          margin: 10px 0;
        }
      }
    }

    .rightContent {
      .top {
        display: flex;
        justify-content: space-around;

        .item {
          display: flex;
          flex-direction: column;
          align-items: center;

          img {
            width: 130px;
            height: 130px;
          }

          span {
            margin: 5px 0;
          }
        }
      }

      .tip {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 10px;
        font-size: 20px;
        font-weight: 900;
      }
    }
  }
}
</style>
